<script setup>
import {useStore} from "vuex";
import {computed, nextTick, ref, render, h} from "vue";
import {Edit} from "@element-plus/icons-vue";
import ChangePassword from "@/views/userinfo/com/change-password.vue";
import router from "@/router";
import TestVue from './com/test.vue'
import IM from  '@/ws/index'

const resetRef = ref(null)

const store = useStore()

function closeWs() {
  IM.close()
}

const userInfo = computed(() => {
  const {userInfo} = store.getters
  const {createtime} = userInfo
  const date = new Date(createtime * 1000)
  const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate(),]

  function patchZero(v) {
    return ('0' + v).slice(-2)
  }

  return {
    ...userInfo,
    createTime: `${year}-${patchZero(month)}-${patchZero(day)}`
  }
})


console.log(userInfo, 'userInfo')

function changePwd() {
  console.log(resetRef.value, 'value')
  resetRef.value?.open(userInfo.value.mobile)
}

function changeSuccess() {
  store.dispatch('app/logout', false)
  router.replace({name: 'login'}).catch(null)
}

const sexRange = computed(() => ([
  {
    value: '男'
  },
  {
    value: '女'
  },
  {
    value: '保密'
  }
]))
const tagList = ref(['怕麻烦', 'JavaScript', 'Vue', 'Rect'])
const showTagInput = ref(false)

const InputRef = ref(null)

function showInput() {
  showTagInput.value = true
  nextTick(() => {
    InputRef.value?.input?.focus()
  })
}

const inputValue = ref('')


function addTag(value) {
  const index = tagList.value.findIndex(item => item === value)
  if (index !== -1) {
    return
  }
  tagList.value.push(value)
}

function handleInputConfirm() {
  showTagInput.value = false
  if (!inputValue.value) return
  addTag(inputValue.value)
  inputValue.value = ''
}

function handleClose(index) {
  console.log(index, 'index')
  tagList.value.splice(index, 1)
}

function showProgress() {
  const vnode = h(TestVue, {
    onClose: () => {
      vnode.el.remove()
    }
  })
  const wrap = document.createDocumentFragment()
  render(vnode, wrap)
  document.body.appendChild(wrap)
}
</script>

<template>
  <div class="full">
    <el-row :gutter="24">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="userinfo-wrap">
            <el-avatar :src="userInfo.avatar" :size="100"></el-avatar>
            <p class="username">
              <span>{{ userInfo.nickname }}</span>
            </p>
            <p class="user-remark">
              <span>富在术数，不在劳身；利在势居，不在力耕。</span>
            </p>
            <el-button :icon="Edit" type="primary" round @click="changePwd">修改密码</el-button>
          </div>
          <div class="user-desc-wrap">
            <div class="desc-item">
              <svg-icon icon="city" class="item-icon"/>
              <span class="item-text">{{ userInfo.company_name }}</span>
            </div>
            <div class="desc-item">
              <svg-icon icon="user-time" class="item-icon"/>
              <span class="item-text">{{ userInfo.createTime }}</span>
            </div>
          </div>
          <el-button @click="closeWs">关闭</el-button>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card header="基本信息" shadow="hover">
          <div class="form-wrap">
            <el-form label-width="90px">
              <el-form-item label="姓名">
                <el-input type="text" placeholder="请输入姓名"/>
              </el-form-item>
              <el-form-item label="性别">
                <el-select placeholder="请选择性别">
                  <el-option v-for="(item,index) in sexRange" :key="index" :label="item.value" :value="item.value"/>
                </el-select>
              </el-form-item>
              <el-form-item label="个人简介">
                <el-input type="textarea" placeholder="请输入个人简介" rows="3"/>
              </el-form-item>
              <el-form-item label="标签">
                <el-tag v-for="(item,index) in tagList"
                        :key="index"
                        class="mx-1"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(index)">{{ item }}
                </el-tag>
                <el-input
                    v-if="showTagInput"
                    ref="InputRef"
                    v-model="inputValue"
                    class="button-new-tag w-20"
                    style="width: 100px"
                    size="small"
                    @keyup.enter="handleInputConfirm"
                    @blur="handleInputConfirm"
                />
                <el-button v-else class="button-new-tag" size="small" @click="showInput">
                  + New Tag
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <change-password ref="resetRef" @success="changeSuccess"/>
  </div>
</template>

<style scoped lang="scss">
.form-wrap {
  width: 400px;

  .button-new-tag {
    margin-bottom: 8px;
  }

  .mx-1 {
    margin-bottom: 8px;
    margin-right: 8px;
  }
}

.user-desc-wrap {
  padding-left: 40px;
  box-sizing: border-box;
  color: rgb(48, 49, 51);

  .desc-item {
    display: flex;
    align-items: center;
    line-height: 30px;

    .item-text {
      margin-left: 4px;
      font-size: 14px;
    }
  }
}

.userinfo-wrap {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 24px;
  box-sizing: border-box;
  position: relative;

  p {
    margin: 0;
  }

  .user-remark {
    color: rgb(48, 49, 51);
    margin: 8px 0 15px;
    word-break: break-all;
    text-align: center;
    font-size: 14px;

  }

  .username {
    margin-top: 15px;
    font-size: 24px;
    font-weight: 500;
    color: #262626;
  }

}
</style>
